<template>
  <div id="mytabs">
    <el-tabs
      type="border-card"
      @tab-click="handleTabClick"
      v-model="modelValue"
    >
      <el-tab-pane label="院校优先" name="yx">
        <template #label>
          <span class="custom-tabs-label">
            <span style="margin: 0 10px" class="iconfont icon-yuanxiao"></span>
            <span>院校优先</span>
          </span>
        </template>
        <collegeTab
          :tabDataList="tabDataList"
          @handleClick="handleClick"
          @updateHistortList="updateHistortList"
          ref="collegeTabRef"
        />
      </el-tab-pane>

      <el-tab-pane label="专业优先" name="zy">
        <template #label>
          <span class="custom-tabs-label">
            <span style="margin: 0 10px" class="iconfont icon-reading"></span>
            <span>专业优先</span>
          </span>
        </template>
        <majorTab
          :majorDataList="majorDataList"
          @handleHistoryList="handleHistoryList"
          @handleClearAll="handleClearAll"
          @updateMajorHistortList="updateMajorHistortList"
          ref="majorTabRef"
        />
      </el-tab-pane>
    </el-tabs>
    <div
      class="df"
      style="padding: 15px; flex-wrap: wrap"
      v-if="tabPaneNameIndex == 0"
    >
      <div class="f14" style="color: #9b9b9b">筛选条件：</div>
      <div
        class="filter-item df"
        v-for="(item, index) in conditionList"
        :key="index"
      >
        <div class="df">
          <span class="iconfont icon-yuanxiao f14"></span>
          <div style="margin: 0 5px" class="f14">{{ item.item }}</div>
          <el-icon
            @click="handleClose(item)"
            style="cursor: pointer; color: #ccc"
            ><Close
          /></el-icon>
        </div>
      </div>
    </div>

    <div
      class="df"
      style="padding: 15px; flex-wrap: wrap"
      v-if="tabPaneNameIndex == 1"
    >
      <div class="f14" style="color: #9b9b9b">筛选条件：</div>
      <div
        class="filter-item df"
        v-for="(item, index) in majorHistoryListData"
        :key="index"
      >
        <div class="df">
          <span class="iconfont icon-reading f14"></span>
          <div style="margin: 0 5px" class="f14">{{ item.name }}</div>
          <el-icon
            style="cursor: pointer; color: #ccc"
            @click="handleClearMajor(item)"
            ><Close
          /></el-icon>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import collegeTab from '../CollegeTab';
import majorTab from '../MajorTab';
import bus from '@/utils/bus';
import { ref, watch } from 'vue';
import store from '@/store';
const conditionList = ref([]);
const props = defineProps({
  tabDataList: {
    type: Object,
    default: () => {},
  },
  majorDataList: {
    type: Object,
    default: () => {},
  },
  activeName: {
    type: String,
    default: '',
  },
});
const emits = defineEmits(['update:activeName']);
const modelValue = ref(props.activeName);
const tabPaneNameIndex = ref('0');
const collegeTabRef = ref(null);
const updateMajorHistortList = (data) => {
  let major = {
    majorType: data.slice(0, 2),
    code: data.slice(2, 4),
    name: data.split('/')[1],
  };
  majorHistoryListData.value.push(major);
};
const majorTabRef = ref(null);
const handleClearMajor = (item) => {
  const body = {
    code: item.majorType + item.code,
    name: item.name,
  };
  majorTabRef.value.handleMajorClick(body);
};
const handleClearAll = () => {
  majorHistoryListData.value = [];
};
const majorHistoryListData = ref([]);
const handleHistoryList = ({ type, majorType, code, name, list }) => {
  if (type == 0) {
    majorHistoryListData.value = majorHistoryListData.value.filter(
      (v) => !(v.majorType == majorType && v.code == code && v.name == name),
    );
  } else if (type == 1) {
    majorHistoryListData.value.push({ majorType, code, name });
  } else if (type == 2) {
    majorHistoryListData.value = majorHistoryListData.value.filter(
      (v) => !(v.majorType == majorType),
    );
    majorHistoryListData.value.push(...list);
  }
};
const handleClose = (element) => {
  const { type, index, item } = element;
  if (type != 'perfer') {
    collegeTabRef.value.handleClick(type, index, item);
  } else {
    bus.emit('updateCollegeDataList', index);
    conditionList.value = conditionList.value.filter((v) => v.index != index);
  }

  store.commit('znxk/set_filterCollegeList', conditionList.value);
};
const handleTabClick = (TabPaneName) => {
  tabPaneNameIndex.value = TabPaneName.index;
  modelValue.value = TabPaneName.paneName;
  emits('update:activeName', TabPaneName.paneName);
};
// 0 删除 1 添加  2 选择头部标签时的逻辑
const handleClick = ({ type, item }) => {
  if (type == 0) {
    // 反选
    conditionList.value = conditionList.value.filter(
      (v) => !(v.index == item.index && v.item == item.item),
    );
  } else if (type == 1) {
    // 正选
    conditionList.value.push(item);
  } else if (type == 2) {
    // 选择头部标签时，如果一个标签选择维度里面有多个类型，则需要额外加其他的逻辑
    const selectType = item.type;
    // 单独一个类型，这样写可以直接过滤掉
    if (['province', 'categories'].includes(selectType)) {
      conditionList.value = conditionList.value.filter(
        (v) => !(v.type == selectType),
      );
      // 否则 走多个过滤逻辑
    } else if (['features', 'natureType'].includes(selectType)) {
      conditionList.value = conditionList.value.filter(
        (v) => !['features', 'natureType'].includes(v.type),
      );
    }
  }
  store.commit('znxk/set_filterCollegeList', conditionList.value);
};
const updateHistortList = ({ type, item }) => {
  handleClick({
    item: item,
    type: type,
  });
};

watch(
  () => props.activeName,
  (newVal) => {
    modelValue.value = newVal;
  },
);
</script>

<style lang="scss" scoped>
#mytabs {
  .item-title {
    width: 100px;
    margin: 10px 0;
    color: #9b9b9b;
  }
  .item-box {
    margin: 10px 0;
  }
  .tabs {
    width: 70px;
    margin: 10px 0px;
    &:hover {
      color: var(--color-text);
    }
  }
  .chiltabs {
    margin-right: 10px;
    &:hover {
      color: var(--color-text);
    }
  }
  .filter-item {
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    font-size: 14px;
    line-height: 32px;
    height: 32px;
    margin: 4px;
    padding: 0 10px;
  }
}
.selected {
  border: 1px solid var(--color-text);
  border-radius: 3px;
  color: var(--color-text);
}
</style>
<style>
.el-tabs--border-card {
  border-bottom: none;
}
</style>
